<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      position: relative;
      margin: 100px auto;
      width: 500px;
      display: flex;
      flex-direction: column;
    }
    #img {
      display: none;
      width: 100px;
      height: 100px;
    }
    .btn {
      position: absolute;
      bottom: 0;
      right: 20px;
    }
  </style>
</head>
<body>
  <div class="box">
    <h3>新建用户信息：</h3>
    用户名：<input type="text" id="name">
    <br>
    密码：<input type="password" id="password">
    <br>
    头像：<input type="file" id="file">
    <br>
    <img id="img">
    <div class="btn">
      <button class="submit">提交</button>
    </div>
  </div>

  <script>
    const formdata = new FormData();
    // 获取图片信息
    let img = document.getElementById('img')
    let file = document.getElementById('file')
    file.onchange = function () {
      let imgFile = this.files[0]
      formdata.append("file", imgFile)
      img.style.display = 'block'
      img.src = URL.createObjectURL(imgFile)
      img.onload = function () {
        URL.revokeObjectURL(this.src)
      }
    }
    // 获取用户名和密码
    const username = document.getElementById('name')
    const password = document.getElementById('password')
    
    username.addEventListener('change', function () {
      formdata.append("username", this.value)
    })
    password.addEventListener('change', function () {
      formdata.append("password", this.value)
    })

    // 提交
    const submit = document.querySelector('.submit')
    submit.addEventListener('click', function () {
      fetch('http://127.0.0.1:3000/registry', {
        method: 'POST',
        body: formdata
      }).then(res => res.json()).then(data => {
        console.log(data)
      })
    })
  </script>

  </script>


</body>
</html>